<template>
  <div>
    <el-dialog
        v-model="dialog.show"
        :close-on-click-modal="false"
        title="添加车位申请"
        width="400px">
      <div><Add v-if="dialog.show"
                v-model:show="dialog.show"
                @getTableData="getTableData"/></div>
    </el-dialog>
    <div>
      <div style="margin-left: 20px;margin-top: 10px;"> 您的申请：</div>
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in main.tableData" :key="item.id">
          <el-card  shadow="hover" v-if="item.end!==0">
            <template #default="scope">
              <div>申请信息:<Car style="margin-left: 80px;"/></div><br />
              <div style="margin-left: 50px;margin-bottom: 10px;">
                <div style="margin-top: 5px;">车位:&nbsp&nbsp{{item.content}}</div><br/>
                <div style="margin-top: 5px;">车牌号:&nbsp&nbsp{{item.carNumber}}</div><br/>
                <div style="margin-top: 5px;">申请人:&nbsp&nbsp{{item.username}}</div><br/>
                <span>状态:
                  <el-tag type="primary" plain  v-if="item.occupied==1" >审核中</el-tag>
                  <el-tag type="success" plain size="small" v-else-if="item.occupied==2">已通过</el-tag>
                </span><br/>
              </div>
              <span style="margin-left: 70px;">
                <el-button v-if="item.occupied==1" type="danger" plain  @click="del(item.id)" >撤回</el-button>
                <el-button v-if="item.occupied==2" type="warning" plain  @click="stop(item.id)" >结束使用</el-button>
              </span>
            </template>
          </el-card>
          <el-card v-else shadow="hover" @click="add" style="height:320px;">
            <Addd style="margin-top: 30px;"/>
          </el-card>
        </el-col>
      </el-row>
      <div style="margin-top: 26px; display: flex; justify-content: space-between;">
        <div style=" flex: 1;">
          <div >小区布局图：</div>
          <el-card shadow="hover" style="width:650px; height: 500px; position: relative;">
            <div class="map-container">
              <!-- 楼房 -->
              <div
                  v-for="(building, index) in buildings"
                  :key="'building-'+index"
                  class="building"
                  :style="{
                  left: building.x + 'px',
                  top: building.y + 'px',
                  width: building.width + 'px',
                  height: building.height + 'px',
                }"
                  @mouseover="showTooltip('building', index)"
                  @mouseout="hideTooltip">
                <div class="building-number">{{ building.number }}</div>
              </div>

              <!-- 车位区 -->
              <div
                  v-for="(parking, index) in parkings"
                  :key="'parking-'+index"
                  class="parking-area"
                  :style="{
                  left: parking.x + 'px',
                  top: parking.y + 'px',
                  width: parking.width + 'px',
                  height: parking.height + 'px',
                }"
                  @mouseover="showTooltip('parking', index)"
                  @mouseout="hideTooltip">
                <div class="parking-number">{{ parking.name }}</div>
              </div>

              <!-- 提示框 -->
              <div v-if="tooltip.show" class="map-tooltip" :style="tooltip.style">
                {{ tooltip.content }}
              </div>
            </div>
            <div class="direction-indicator" style="font-size: 30px">
              北↑
            </div>
          </el-card>
        </div>
        <div style="margin-left: 50px; flex: 1;">
          <div style="margin-left: 5px;">空闲车位：</div>
          <el-card shadow="hover" style="width:500px;height: 650px">
            <div style="margin-left: 20px; margin-bottom: 10px;">
              <el-select v-model="selectedArea" placeholder="请选择区域" @change="filterByArea">
                <el-option label="A区" value="A" />
                <el-option label="B区" value="B" />
                <el-option label="C区" value="C" />
                <el-option label="D区" value="D" />
                <el-option label="E区" value="E" />
              </el-select>
            </div>

            <div class="flex-container">
              <el-tag type="success" style="--el-tag-text-color:black;" v-for="(item, index) in filteredParkingSpots" :key="item.id" class="flex-item">
                {{ item.content }}
              </el-tag>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import CheWei from '@/views/service/components/icon/chewei'
import Addd from '@/views/service/components/icon/add'
import Car from '@/views/service/components/icon/car'
import { ref, reactive, computed, watch } from 'vue'
import Add from './add'
import { get, post } from '@/plugins/axios'
import { getCookieForObject } from '@/util'
import{_axios} from '@/plugins/axios'

const dialog = reactive({
  show: false,
  title: '',
  id: null
})

const main = reactive({
  tableData: [], // 初始化为空数组
  kong: [],
})

// 小区布局数据
const buildings = ref([
  { number: '1号楼', x: 50, y: 50, width: 120, height: 80 },
  { number: '2号楼', x: 200, y: 30, width: 100, height: 90 },
  { number: '3号楼', x: 350, y: 60, width: 110, height: 70 },
  { number: '4号楼', x: 50, y: 180, width: 90, height: 100 },
  { number: '5号楼', x: 200, y: 200, width: 130, height: 80 },
  { number: '6号楼', x: 380, y: 170, width: 100, height: 90 },
  { number: '7号楼', x: 11, y: 300, width: 120, height: 70 },
  { number: '8号楼', x: 212, y: 290, width: 110, height: 80 },
  { number: '9号楼', x: 440, y: 294, width: 100, height: 90 },
  { number: '10号楼', x: 500, y: 100, width: 90, height: 100 },
  { number: '正门', x: 5, y: 150, width: 30, height: 20 },
]);

const parkings = ref([
  { name: 'A区车位', x: 150, y: 135, width: 80, height: 60 },
  { name: 'B区车位', x: 300, y: 140, width: 70, height: 50 },
  { name: 'C区车位', x: 500, y: 205, width: 90, height: 70 },
  { name: 'D区车位', x: 141, y: 285, width: 60, height: 80 },
  { name: 'E区车位', x: 332, y: 295, width: 100, height: 60 },
]);

// 提示框
const tooltip = reactive({
  show: false,
  content: '',
  style: {
    left: '0px',
    top: '0px'
  }
})

// 新增：区域选择相关
const selectedArea = ref('A') // 默认选择A区

// 计算属性：根据选择的区域过滤车位
const filteredParkingSpots = computed(() => {
  return main.kong.filter(item => item.content.startsWith(selectedArea.value))
})

function getUserName() {
  const userinfo = getCookieForObject('user')
  return userinfo.username
}

function del(id) {
  ElMessageBox.confirm('确定撤回车位申请记录吗？撤销后不可修复', '警告', {
    type: 'warning',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(() => {
    post('/parkingSpace/del', { id: id }, content => {
      getTableData()
    })
  })
}

function stop(id) {
  ElMessageBox.confirm('确定结束该车位的使用吗？结束后不可修复', '警告', {
    type: 'warning',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(() => {
    post('/parkingSpace/del', { id: id }, content => {
      getTableData()
    })
  })
}

function request() {
  _axios.request({
    url: 'http://localhost:8080/parkingSpace/list',
    method: 'get'
  }).then(response => {
    const username = getUserName()
    const filteredData = response.data.filter(item => item.username === username && item.occupied != 0)
    main.tableData = filteredData
    main.tableData.push({ end: 0 })
  })
}

function kong() {
  _axios.request({
    url: 'http://localhost:8080/parkingSpace/list',
    method: 'get'
  }).then(response => {
    const username = getUserName()
    const filteredData = response.data.filter(item => item.occupied != 1 && item.occupied != 2)
    main.kong = filteredData
  })
}

function getTableData() {
  request()
  kong()
}

function add() {
  dialog.show = true
}

// 新增：区域筛选方法
function filterByArea() {
  this.$message({
    message: `已筛选${selectedArea.value + '区'}的车位`,
    type: 'success'
  });
}

function showTooltip(type, index) {
  if (type === 'building') {
    tooltip.content = buildings.value[index].number
    tooltip.style = {
      left: (buildings.value[index].x + buildings.value[index].width / 2) + 'px',
      top: (buildings.value[index].y - 30) + 'px'
    }
  } else if (type === 'parking') {
    tooltip.content = parkings.value[index].name
    tooltip.style = {
      left: (parkings.value[index].x + parkings.value[index].width / 2) + 'px',
      top: (parkings.value[index].y - 30) + 'px'
    }
  }
  tooltip.show = true
}

function hideTooltip() {
  tooltip.show = false
}

request()
kong()
</script>

<style scoped lang="scss">
.el-card {
  width: 250px;
  max-height: 450px;
  margin: 10px;
  background-color: #fefaeb;
}

.el-card:hover {
  cursor: pointer;
}

.el-tooltip__trigger:active {
  border: #f8f3ff;
}

.el-tooltip__trigger {
  border-color: #f8f3ff;
}

.map-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.flex-item {
  flex: 0 0 calc(100% / 5); /* 每一行显示5个空闲车位 */
  text-align: center;
  white-space: nowrap;
  margin: 5px; /* 添加一些间距 */
}
.flex-item .el-tag {
  width: 10px; /* 设置每个el-tag的宽度为15px */
  height: 15px; /* 设置每个el-tag的高度为15px */
  line-height: 15px; /* 调整文字对齐 */
  font-size: 14px; /* 调整字体大小 */
}
.flex-container::after {
  content: "";
  flex: auto;
}
.building {
  position: absolute;
  background-color: #fce4c3;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #2c2222;
  font-weight: bold;
  transition: all 0.3s;
}

.building:hover {
  filter: brightness(1.2);
  z-index: 10;
}

.parking-area {
  position: absolute;
  background-color: #d3f3d2;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #090000;
  font-weight: bold;
  transition: all 0.3s;
}

.parking-area:hover {
  filter: brightness(1.2);
  z-index: 10;
}

.building-number, .parking-number {
  font-size: 12px;
  white-space: nowrap;
}

.map-tooltip {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  z-index: 100;
  pointer-events: none;
}

/* 新增：下拉选择框样式 */
.el-select {
  width: 150px;
}
</style>
